<template>
  <div class="table-bg1">
    <a-table
      ref="table"
      bordered
      :rowKey="record => record.yum_id"
      :columns="columns"
      :dataSource="data"
      :loading="false"
      :pagination="pagination"
      :scroll="scroll"
    >
      <!-- //文本 -->
     <p slot="content" slot-scope="text, record" style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;width:300px;">{{text}}</p>
     <p slot="updatedAt" slot-scope="text, record" >{{!text?'自上传日起未修改':text}}</p>
     <video slot="video" controls muted slot-scope="text, record" :src="text" style="max-width:250px;max-height:250px"></video>
     <img slot="thumb" slot-scope="text, record" :src="text" style="max-width:250px;max-height:250px"/>
      <div slot="isShow" slot-scope="text, record">
        <a-tag color="orange" v-if="record.isShow==0">不显示</a-tag>
        <a-tag color="green" v-if="record.isShow==1">显示</a-tag>
        <!-- <a-tag color="red" v-if="record.isShow==3">审核不通过</a-tag> -->
      </div>
      <div slot="action" slot-scope="text,record">
       <a-switch
          checkedChildren="打开溯源"
          :defaultChecked="record.startPresale?true:false"
          unCheckedChildren="关闭溯源"
          @change="bol=>changeYuShouState(bol,record)"
        />
        
        <!-- <a-button type="primary" @click="chakanxq(record.yumId)" >查看详情</a-button> -->
      </div>
    </a-table>
    <!-- 弹出详情 -->
     <a-modal
      title="详情"
      :visible="xiangqing"
      :width="720"
      @ok="()=>{xiangqing=!xiangqing}"
      @cancel="()=>{xiangqing=!xiangqing}"
    >
      <ui v-if="xqxx" class="xiangq">
        <li> <span>姓名:</span> {{xqxx.realname}}</li>
        <li> <span>手机号:</span> {{xqxx.binding}}</li>
        <li> <span>简历:</span> <p style="width:500px">{{xqxx.grjl}}</p> </li>
        <li> <span>所在地区:</span> {{xqxx.diqu}}</li>
        <li> <span>详细地址:</span> {{xqxx.xxdz}}</li>
        <li> <span>身份证正面:</span> <img :src="xqxx.sfzzm" alt=""> </li>
        <li> <span>身份证反面:</span> <img :src="xqxx.sfzfm" alt=""></li>
        <li> <span>工作证:</span> <img :src="xqxx.gzz" alt=""></li>
      </ui>
    </a-modal>
  </div>
</template>
<script>
import reqwest from "reqwest";

export default {
  data() {
    return {
      //   biaotou: [],
      //点击要查看或修改的id
      addid: null,
      xiangqing:false,
      //监管员详情信息
      xqxx:null,
      form: this.$form.createForm(this),
      scroll: { x: 2000 },
      columns: [
        {
          title: "店铺名",
          align: "center",
          dataIndex: "name",
          scopedSlots: { customRender: "name" }
        },
        {
          title: "图片",
          align: "center",
          dataIndex: "log",
          scopedSlots: { customRender: "log" }
        },
        {
          title: "店铺状态",
          align: "center",
          dataIndex: "reviewResult",
          scopedSlots: { customRender: "reviewResult" }
        },
        {
          title: "营业",
          align: "center",
          dataIndex: "isOpen",
          scopedSlots: { customRender: "isOpen" }
        },
        {
          title: "地址",
          align: "center",
          dataIndex: "address",
           scopedSlots: { customRender: "address" }
        },
         {
          title: "电话",
          align: "center",
          dataIndex: "serviceTel",
           scopedSlots: { customRender: "serviceTel" }
        },
         {
          title: "微信号",
          align: "center",
          dataIndex: "wechatName"
        },
        {
          title: "操作",
          align: "center",
          scopedSlots: { customRender: "action" }
        }
      ],
      //分页
      pagination: {
        // 分页配置器
        pageSize: 5, // 一页的数据限制
        current: 0, // 当前页
        total: 0, // 总数
        onChange: (page, pageSize) => {
          this.changePage(page, pageSize);
        }
      },
      data: []
    };
  },
  created() {
    var _this = this;
    _this
      .$get("/gen/hjmallind-mch/list", {
        pageNum: _this.pagination.current,
        pageSize: _this.pagination.pageSize
      })
      .then(data => {
        console.log(data.data.data);
        console.log(data.data.data.records);
        console.log(data.data.data.total);
        _this.pagination.total = data.data.data.total;
        _this.data = data.data.data.records;
      })
      .catch(err => {
        console.warn(err);
      });
  },
  methods: {
    //切换页面
    changePage(page, pageSize) {
      var _this = this;
      _this.pagination.current = page;
      _this
        .$get("/gen/hjmallind-mch/list", {
          pageNum: _this.pagination.current,
          pageSize: _this.pagination.pageSize
        })
        .then(data => {
          // console.log(data.data.data.records);
          console.log(data.data.data.total);
          _this.pagination.total = data.data.data.total;
          _this.data = data.data.data.records;
          console.log(_this.data);
        })
        .catch(err => {
          console.warn(err);
        });
    },
    //操作审核状态
    shenhe(type, e, r) {
      console.log(type, r);
      var _this = this;
      //设置选中id
      _this.addid = r;
      _this.$post('/gen/hjmallind-goods-yum/update',{
        yumId:_this.addid,
        isShow:type 
      }).then(data=>{
        console.log(data);
          _this.reFresh()
      })

    },
    //重新刷新数据
    reFresh() {
      var _this = this;
    _this
      .$get("/gen/hjmallind-goods-yum/list", {
        pageNum: _this.pagination.current,
        pageSize: _this.pagination.pageSize
      })
      .then(data => {
        console.log(data.data.data);
        console.log(data.data.data.records);
        console.log(data.data.data.total);
        _this.pagination.total = data.data.data.total;
        _this.data = data.data.data.records;
      })
      .catch(err => {
        console.warn(err);
      });
    },
    //查看详情
    chakanxq(id){
      var _this=this;
      _this.xiangqing=!_this.xiangqing;
      _this.$get(`/gen/hjmallind-user/model/${id}`).then(data=>{
        console.log('监管员详情',data.data.data);
        _this.xqxx=data.data.data
      })
    }
  }
};
</script>
<style scope>
.table-bg1 {
  background: #fff;
  padding: 0;
}
.xiangq li{
  margin: 10px 0;
  color: #555;
  display: flex;
  flex-direction: row;
  align-items: flex-start
}
.xiangq p{
  white-space:normal
}
.xiangq li span{
  font-weight: bold;
  color: #222;
  white-space:nowrap;
  margin-right: 15px;
  width: 80px
}
.xiangq li img{
  width: 200px;
}
.del-inner {
  cursor: pointer;
  color: rgb(176, 32, 32);
}
.del-inner:hover {
  color: rgb(218, 80, 80);
}
.flex-alv {
  display: flex;
  flex-direction: row;
  align-content: center;
}
.grjl {
  width: 500px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
p {
  margin-bottom: 0;
}
.ant-table-pagination.ant-pagination {
  margin-right: 50px;
}
</style>